<template>
  <div>
    <div id="chat-showuser" ref="chatShowUser"></div>
    <!-- 根据用户名显示对话框 -->
    <div class="chat-message-wrap">
      <div v-for="(item,index) in allMessage" :key="index">
        <!-- 自己 -->
        <div class="chat-message-me" v-if="item.username===username">
          <div class="chat-br-me">{{item.message}}</div>
          <div class="chat-message-me-right">
            <img src="./images/slll.jpg" alt="avatar" class="chat-avatar" />
          </div>
        </div>
        <!-- 别人 -->
        <div class="chat-message-other" v-else-if="item.username!==username">
          <div class="chat-message-other-left" style="">{{item.username}}</div>
          <div class="chat-br-other">{{item.message}}</div>
        </div>
        <p
          v-if="typeof item.count==='number'"
          style="text-align:center;"
        >{{item.user}}加入了群聊 当前人数{{item.count}}</p>
        <p
          v-if="typeof item.count==='string'"
          style="text-align:center;"
        >{{item.user}}退出了群聊 当前人数{{item.count}}</p>
      </div>
    </div>
    <!-- 发送表情或文字 -->
    <div class="chat-input-wrap">
      <div class="chat-emoji-container" v-if="emojiFlag" @click="selectEmoji">
        <div class="item">😀</div>
        <div class="item">😃</div>
        <div class="item">😄</div>
        <div class="item">😁</div>
        <div class="item">😆</div>
        <div class="item">😅</div>
        <div class="item">🤣</div>
        <div class="item">😂</div>
        <div class="item">🙂</div>
        <div class="item">🙃</div>
        <div class="item">😉</div>
        <div class="item">😊</div>
        <div class="item">😇</div>
        <div class="item">😍</div>
        <div class="item">🤩</div>
        <div class="item">😘</div>
        <div class="item">😚</div>
        <div class="item">😙</div>
        <div class="item">😝</div>
        <div class="item">😑</div>
      </div>
      <mt-field
        label
        placeholder
        v-model="inputMessage"
        @keyup.enter.native="sendMsg"
        class="chat-input"
      >
        <mt-button type="default" class="chat-send" size="small" @click="sendEmoji">😀</mt-button>
        <mt-button type="default" class="chat-send" size="small" @click="sendMsg">发送</mt-button>
      </mt-field>
    </div>
  </div>
</template>
<script>
import io from 'socket.io-client'
import { mapState, mapActions } from 'vuex'
import {Toast} from 'mint-ui'
export default {
  data() {
    return {
      allMessage: [], //所有消息数组
      inputMessage: '', //输入要发送的消息
      socket: io('ws://localhost:3000'), //websocket协议获取客户端socket对象
      emojiFlag: false //表情面板状态
    }
  },
  computed: {
    ...mapState(['username'])
  },
  methods: {
    ...mapActions(['amendStateUsername']),
    //发送文字消息
    sendMsg() {
      if (this.inputMessage.trim()) {
        this.socket.emit('sendMessage', {
          username: this.username,
          message: this.inputMessage
        })
        this.inputMessage = ''
        if (this.emojiFlag) {
          this.emojiFlag = !this.emojiFlag
        }
      }else{
        Toast('发送内容不能为空')
      }
    },
    //激活表情面板
    sendEmoji() {
      this.emojiFlag = !this.emojiFlag
    },
    //选择表情
    selectEmoji(e) {
      this.inputMessage += e.target.innerText
    },
    disconnect(){
      console.log(1);
    }
  },
  created() {
    //获取用户名
    this.$axios.get('/api/getUser').then(user => {
      //vuex状态管理修改store中state的状态数据username 根据当前cookie
      this.amendStateUsername(user.data.data.username)
    })
  },
  mounted() {
    //开启客户端消息接收监听并push进消息数组中
    this.socket.on('receiveMessage', data => {
      this.allMessage.push(data)
    })
    //向客户端发送用户名为同步操作 这时候请求的用户名为异步操作更新state中username还没有结果 为同步的话则发送的登录用户名可能为空串
    setTimeout(() => {
      this.socket.emit('login', this.username)
    }, 1000)
    //接收显示加人聊天的用户名
    this.socket.on('showUser', user => {
      this.allMessage.push(user)
    })
    //接收用户退出的监听
    this.socket.on('showOut', user => {
      this.allMessage.push(user)
    })
  },
  watch: {
    allMessage() {
      this.$nextTick(function() {
        //document.body.scrollHeight滚动条的整体高度
        window.scroll(0, document.body.scrollHeight)
      })
    }
  }
}
</script>
<style scoped>
/* 发送消息部分 */
.chat-input {
  background-color: #e5e4e9;
}
.chat-send {
  margin-left: 10px;
  width: 55px;
  height: 25px;
}
.chat-input-wrap {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.chat-emoji-container {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(10, 10%);
  grid-template-rows: 50px 50px;
}
.chat-emoji-container:hover{
  cursor: pointer;
}
.chat-emoji-container .item {
  line-height: 50px;
  text-align: center;
  border: 1px solid #e5e4e9;
}

/* 我发的信息样式 */
.chat-message-me {
  display: flex;
  justify-content: flex-end;
  padding: 5px;
}
.chat-message-me-right {
  margin-left: 10px;
}
.chat-avatar {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  line-height: 30px;
}

/* 别人发的信息样式 */
.chat-message-other {
  display: flex;
  justify-content: flex-start;
  padding: 5px;
}
.chat-message-other-left {
  margin-right: 10px;
}

/* 公共部分 信息*/
.chat-br-me {
  word-break: break-word;
  line-height: 30px;
  background-color: rgb(95, 236, 161);
  border-radius: 5%;
  font-size: 12px;
  padding: 0 10px 0 10px;
}
.chat-br-other {
  word-break: break-word;
  line-height: 30px;
  background-color: pink;
  border-radius: 5%;
  font-size: 12px;
  padding: 0 10px 0 10px;
}
/* 消息容器 */
.chat-message-wrap {
  margin-bottom: 48px;
}
</style>
